<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '登录',
    navigationBarBackgroundColor: '#fff',
    navigationBarTextStyle: 'black',
  },
}
</route>
<template>
  <Loyout class="login-page" :isValidateLogin="false">
    <view class="flex-center pt-20">
      <wd-img :width="280" :height="280" :src="Logo" />
    </view>
    <view class="form-box pr-50 pl-50">
      <wd-input
        :use-prefix-slot="true"
        class="pt-20"
        required
        v-model="formData.account"
        clearable
        placeholder="请输入账号"
      >
        <template #prefix>
          <view class="i-carbon-user fs-36"></view>
        </template>
      </wd-input>
      <wd-input
        class="pt-60"
        :use-prefix-slot="true"
        v-model="formData.password"
        clearable
        show-password
        placeholder="请输入密码"
      >
        <template #prefix>
          <view class="i-carbon-password fs-36"></view>
        </template>
      </wd-input>
      <view class="pt-120 flex-center">
        <wd-button class="flex1" size="large" @click="loginHandler">登 录</wd-button>
      </view>
    </view>
  </Loyout>
</template>

<script lang="ts" setup>
import Loyout from '@/layouts/index.vue'
import { useToast } from 'wot-design-uni'
import Logo from '@/static/logo.jpg'
import { getDeviceId } from '@/utils'
import { useUserStore } from '@/store/user'

const formData = reactive({
  account: 'admin',
  password: '1',
})

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const Toast = useToast()

const loginHandler = async () => {
  if (!formData.account || !formData.password) {
    Toast.warning('请输入账号和密码')
    return
  }
  if (formData.account !== 'admin' || formData.password !== '1') {
    Toast.warning('账号或密码错误')
    return
  }
  const deviceId = await getDeviceId()
  userStore.setUserInfo({
    ...userInfo.value,
    deviceId: userInfo.value.deviceId || deviceId,
    token: deviceId,
  })
  Toast.success('登录成功')
  uni.switchTab({
    url: '/pages/index/index',
  })
}

defineOptions({
  name: 'Login',
})
</script>

<style lang="scss">
.login-page {
  .input-label {
    justify-content: center;

    &.is-required::after {
      display: none;
    }
  }

  .wd-input__body {
    border-bottom: 1rpx solid #999;
  }
}
</style>
